import { Button, Form, Input, Select } from 'antd';
import { FC, useCallback, useEffect, useMemo, useState } from 'react'

export interface IRoomParams {
  value: string,
  label: string,
  id: number,
  submit: () => void,
  data: [
    {
      id: number,
      name: string
    }
  ]
}
const AppRoomSearsh: FC<IRoomParams> = (props) => {
  const [form] = Form.useForm()
  const { data=[], submit = (shopName: string, tel: string) => [] } = props
  const [ total = [], setTotal ] = useState([])
  const values = form.getFieldsValue()
  const { shopName, tel } = values
  const categoryOptions = useMemo(() => data.map((item) => ({ value: item.name, label: item.name })), [data])
  const getList = useCallback(async() => {
    const res = await submit(shopName,tel)
    setTotal(res!)
  }, [])
  console.log(total)
  useEffect(() => {
    getList()
  }, [shopName, tel])
  return (
    <Form
        layout="inline"
        form={form}
      >
        <Form.Item label="全部门店" name="shopName">
          <Select
            allowClear
            style={{ width: 120 }}
            options={categoryOptions}
          />
        </Form.Item>
        <Form.Item  name="tel">
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={() => submit(shopName, tel)}>查询</Button>
        </Form.Item>
      </Form>
  )
}

export default AppRoomSearsh
